<template>
  <div class="title">
    <img :src="icon">
    <div class="txt_wrap">
      <p>{{ txt }}</p>
      <p class="en">{{ en }}</p>
      <p class="txt" v-if="more" @click="moreClick">更多></p>
    </div>
    <management-fee-payment-list :dialogVisible="dialogVisible" @closeDialog="closeDialog"></management-fee-payment-list>
  </div>
</template>

<script>
import managementFeePaymentList from '@/components/home/managementFeePaymentList'
import icon from '@/assets/imgs/icon.png'
export default {
  name: 'itemTitle', // 标题
  components:{
    managementFeePaymentList
  },
  props: {
    txt: {
      type: String
    },
    en: {
      type: String
    },
    more: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      icon,
      dialogVisible:false
    }
  },
  methods: {
    moreClick(){
      this.dialogVisible = true;
    },
    closeDialog(){
      this.dialogVisible = false;
    }
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/mixin.scss';

.title {
  @include flex(row, flex-start, center);
  height: .5rem;
  background: url('../assets/imgs/xsj.png') no-repeat right bottom;
  margin-bottom: .125rem;
  border-bottom: 1px solid #0D2F52;
  flex-shrink: 0;

  img {
    width: .15rem;
    height: .2rem;
  }

  p {
    @include fs(#1DF9FC, .225rem, .35rem, bold);
    margin: 0 .1rem;
    font-family: Source Han Sans CN;
  }

  span {
    @include fs(#fff, .175rem, .35rem);
    text-transform: uppercase;
  }

  .txt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;

    //width: 70%;
    .txt {
      font-size: 0.20rem;
      color: #1DF9FC;
      cursor: pointer;
      margin-right: 0.3rem;
    }

    .en {
      font-size: .15rem;
      color: #666B73;
      font-family: SourceHanSansCN-Normal;
    }
  }
}</style>